<template>
  <div class="app-container">
    <el-form ref="userform" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.sex" placeholder="请选择你的姓别">
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="加入时间" prop="create_times">
        <el-col :span="4">
          <el-date-picker
            v-model="form.create_times"
            value-format="timestamp"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-col>
        <!-- <el-col :span="2" class="line">-</el-col>
        <el-col :span="11">
          <el-time-picker
            v-model="form.date2"
            type="date"
            placeholder="Pick a time"
            style="width: 100%"
          />
        </el-col>-->
      </el-form-item>
      <el-form-item label="是否vip" prop="vip">
        <el-switch v-model="form.vip" />
      </el-form-item>
      <el-form-item label="技能" prop="skills">
        <el-checkbox-group v-model="form.skills">
          <el-checkbox label="javascript" name="type" />
          <el-checkbox label="vue" name="type" />
          <el-checkbox label="jQuery" name="type" />
          <el-checkbox label="nodejs" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="是否学生" prop="is_stu">
        <el-radio-group v-model="form.is_stu">
          <el-radio label="是" />
          <el-radio label="否" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="自我介绍" prop="introduce">
        <el-input v-model="form.introduce" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('userform')">提交</el-button>
        <el-button @click="onReset('userform')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { submitUser } from '@/api/form'
export default {
  data () {
    return {
      form: {
        username: '测试',
        sex: '1',
        vip: false,
        is_stu: '是',
        introduce: '缘妙不可言！！！',
        create_times: null,
        skills: ['vue']
      },
      rules: {
        username: [{ required: true, message: '不能为空' }],
        create_times: [{ required: true, message: '不能为空' }],
        skills: [{ required: true, message: '不能为空' }],
        is_stu: [{ required: true, message: '不能为空' }],
        introduce: [{ required: true, message: '不能为空' }]
      }
    }
  },
  methods: {
    onSubmit (form_name) {
      console.log(this.form)
      this.$refs[form_name].validate((valid) => {
        console.log(valid)
        if (valid) {
          submitUser(this.form).then((res) => {
            this.$message({
              message: res.message,
              type: 'success'
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onReset (form_name) {
      this.$refs[form_name].resetFields()
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

